import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
/* class Counter extends React.Component {
    state = {
      count:0
    }
    componentDidMount(){
      document.title = `你点击了${this.state.count}次`
      this.timer = setInterval(() => {
        this.setState({
          count:this.state.count + 1
        })
        console.log('class 定时器')
      }, 1000);
    }
    // componentDidUpdate(){
    //   document.title = `你点击了${this.state.count}次`
    // }
    componentWillUnmount(){
      clearInterval(this.timer)
    }
    render() {
        return <div className=''>
            <h1>当前数字是:{this.state.count}</h1>
            <button onClick={()=>{this.setState({count:this.state.count+1})}}>+</button>
        </div>;
    }
} */

function Counter(){
  let [count,setCount] = useState(0)
  let [name,setName] = useState('珠峰')
  // useEffect 第一个参数是一个回调函数； 第二个参数是一个数组， 数组中放的是依赖
  // 只有当数组中的依赖改变的时候 才会触发这个回调函数
  // 第二个参数可以不传； 不传的时候相当于 类组件的didMount和diUpdate的合体
  // 第二个参数若是一个空数组  则就类似与i我们的类组件的didMount

  // useEffect(()=>{
  //   document.title = name
  // },[name])
  // useEffect(()=>{
  //   console.log(666)
  //   document.title = `你点击了${count}次`
  // },[count])// 

  useEffect(()=>{
    const timer = setInterval(() => {
      setCount((count)=>count+1)
      console.log('定时器')
    }, 1000);
    return ()=>{
      // 可以用来清除 当前回调函数的副作用
      clearInterval(timer)
      console.log('functionde ')
    }
  },[])// 

  
  return <div className=''>
            <h1>{name}当前数字是:{count}</h1>
            <button onClick={()=>{setCount(count+1)}}>+</button>
            <button onClick={()=>{setName("珠峰666")}}>changeName</button>
        </div>;
}
function App(){
  let [isShow,setShow] = useState(true)
  return <>
    <button onClick={()=>{setShow(false)}}>显示</button>
    {
      isShow ? 
      <Counter/>
      :''
    }
  </>
}

ReactDOM.render(<App/>,document.getElementById('root'))